<template>
	<view class="container">
    <!-- 登录头像区域 -->
		<view class="my-login">
		  <view class="avatar" @click="gotoLogin">
			<uni-icons class="df-avatar" type="staff" size="50"></uni-icons>
		  </view>
		  <view class="my-login-text" @click="gotoLogin">{{name}}</view>
		</view>
		<!-- 综合信息区域 -->
		<view class="general">
		  <view class="user-info general-item" v-for="item in general" :key="item.id" @click="gotoGeneral(item)">
			<uni-icons :type="item.icons" size="26"></uni-icons>
			<view class="text-title">{{item.title}}</view>
		  </view>
		</view>
		<!-- 卡片管理 -->
		<view class="module-record">
		  <MyCardCatalog :cardInfo="recordInfo" @click='futrue'></MyCardCatalog>
		</view>
		<!-- 关于 -->
		<view class="module-about">
		  <MyCardCatalog :cardInfo="aboutInfo"  @click='certification'></MyCardCatalog>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
			<view class="footer">
				<view class="text" @click="authentication('/my-subpkg/support/support')">家服人员授权认证</view>
				<view class="text2" @click="authentication('/my-subpkg/administrator/administrator')">家服公司管理员认证</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
  import MyCardCatalog from '../../components/my-card-catalog/my-card-catalog.vue'
	export default {
		data() {
			return {
				userInfo:{},
				type:'center',
				recordInfo:[{
					  id:1,
					  icons:'map-filled',
					  title:'找家政服务记录'
					},
					{
					  id:2,
					  icons:'settings-filled',
					  title:'家政求职记录'
					}],
				aboutInfo:[{
					  id:1,
					  icons:'calendar-filled',
					  title:'身份认证通道'
					},
					{
					  id:2,
					  icons:'info-filled',
					  title:'关于我们'
					}],
				general:[{
					  id:1,
					  icons:'wallet-filled',
					  title:'个人信息',
					  text:'info',
					  url:"/my-subpkg/my-info/my-info"
					},
					{
					  id:2,
					  icons:'person-filled',
					  title:'我的关注',
					  text:'attention',
					  url:"/my-subpkg/my-attention/my-attention"
					},
					{
					  id:3,
					  icons:'chatbubble-filled',
					  title:'我的评价'
					},
					{
					  id:4,
					  icons:'headphones',
					  title:'已联系家政人员',
					  text:'housekeeper',
					  url:"/my-subpkg/housekeeper/housekeeper"
				}]
			
			}
		},
    components:{
      MyCardCatalog
    },
	onShow() {
		const userInfo = JSON.parse(uni.getStorageSync('houseUserInfo'))||{}
		this.userInfo=userInfo
	},
    methods:{
      gotoLogin(){
        uni.navigateTo({
          url:'/pages/login/login'
        })
      },
      gotoGeneral(item){
		  if(item.url)
			uni.navigateTo({
			  url:item.url
			})
		else this.futrue()
      },
	  futrue(){
		  uni.showToast({
		  	icon:'none',
			title:'敬请期待...'
		  })
	  },
	  certification(item){
		if(item.icons==='info-filled')
			uni.navigateTo({
				url: "/my-subpkg/about/about"
			})
		else this.open()
	  },
	  open(){
	          this.$refs.popup.open('bottom')
			  wx.hideTabBar()
	    },
		change(e){
			if(!e.show) wx.showTabBar()
		},
		authentication(url){
			uni.navigateTo({
				url
			})
		}
    },
	computed:{
		name(){
			return this.userInfo.name || this.userInfo.mobile || '请点击登录'
		}
	}
	}
</script>

<style lang="scss">
  .container{
    // 登录头像区域
    .my-login{
      height: 400rpx;
      background-color: #3F51B5;
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar{
        width: 130rpx;
        height: 130rpx;
        background-color: #fff;
        border-radius: 130rpx;
        margin-top: 50rpx;
        position: relative;
        .df-avatar{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
      }
      .my-login-text{
        margin-top: 50rpx;
        color: #fff;
        font-size: 30rpx
      }
    }
    // 综合信息区域
    .general{
      height: 160rpx;
      border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-evenly;
      position: absolute;
      top: 340rpx;
      left: 20rpx;
	  right: 20rpx;
      .general-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .text-title{
        font-size: 26rpx;
      }
    }
    // 记录组件
    .module-record{
      margin-top: 130rpx;
    }
    .module-about{
      margin-top: 10rpx;
    }
  }
  .footer{
	  line-height: 100rpx;
	  text-align: center;
  }
  .footer .text2{
	  border-top: 5rpx solid #ccc;
  }
</style>
